<script setup>
import { onMounted, reactive } from "vue";

let map = null;
const state = reactive({
  markerLayer: "",
  marker: null,
  infoWindow: null,
  value: 1,
});
const TMap = window.TMap;

onMounted(() => {
  init();
});

/**
 * 初始化地图
 */
const init = () => {
  const center = new TMap.LatLng(39.910506, 116.39926431433355);
  map = new TMap.Map(document.getElementById("container"), {
    center: center, // 设置地图中心点坐标
    zoom: 11, // 设置地图缩放级别
    viewMode: "2D",
  });
  addImgMarker(center);
  // 监听地图点击事件
  map.on("click", (e) => {
    // 清除点标记
    // state.marker.setMap(null)
    // 关闭信息窗关闭
    state.infoWindow.close();
    state.marker = null;
    // 添加点标记
    addImgMarker(e.latLng);
    // 地址解析
    getAddress(e);
  });

  // 初始化infoWindow
  state.infoWindow = new TMap.InfoWindow({
    map: map,
    position: center,
    offset: { x: 0, y: -32 }, // 设置信息窗相对position偏移像素
  });
  // 初始关闭信息窗关闭
  state.infoWindow.close();
};

/**
 * 添加点标记
 * @param data data
 */
const addImgMarker = (data) => {
  state.marker = new TMap.MultiMarker({
    map: map,
    geometries: [{ position: new TMap.LatLng(data.lat, data.lng) }],
  });
};

/**
 * 逆地址解析
 * @param e 待解析经纬度
 */
const getAddress = (e) => {
  const geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
  const location = new TMap.LatLng(e.latLng.lat, e.latLng.lng);
  geocoder.getAddress({ location: location }).then((res) => {
    if (res.status === 0) {
      state.infoWindow.open();
      state.infoWindow.setPosition(e.latLng); // 设置信息窗位置
      state.infoWindow.setContent(res.result.address); // 设置信息窗内容
    }
  });
};

function fun() {
  console.log("123");
  map.setCenter(new TMap.LatLng(28.687547,115.8540042));
  addImgMarker({
    lat: 28.687547,
    lng: 115.8540042
  })
}
</script>
<template>
  <div id="container" class="container"></div>
  <div class="map"></div>
  <button @click="fun">定位到江西</button>
</template>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.map {
  width: 100%;
}
</style>
